<template>
  <el-radio-group
    v-bind="{ ...item }"
    v-model="changeValue"
    style="width: 100%"
  >
    <template
      v-for="option in getOptions()"
      :key="option.value"
    >
      <div
        v-if="!isHideQuota(option) && isShowOption(`${props.item?.vModel}_${option.value}`)"
        class="show-vote"
        :class="getOptionClass(option)"
      >
        <el-radio
          :disabled="option.quotaSetting && getSurplusQuota(option) <= 0"
          :value="option.value"
          @click.prevent="handleClick(option)"
        >
          <span v-if="getSurplusQuota(option) <= 0 && item?.config?.quotaBlankWarning">{{ item.config.quotaBlankWarning }}</span>
          <span
            v-else
            v-html="option.label"
          ></span>
          <span
            class="text-muted"
            v-if="showQuota(option)"
          >
            (余{{ getSurplusQuota(option) }})
          </span>
        </el-radio>
        <div class="vote-wrap">
          <el-input
            v-if="option.type && option.type === 'input' && isChecked(option.value)"
            v-model="inputValue"
            class="other-input"
          />
          <vote
            :value="option.value"
            :vote-list="voteList"
            :total-vote="totalVote"
            v-if="item?.config?.showVoteResult"
          ></vote>
        </div>
      </div>
    </template>
  </el-radio-group>
</template>

<script setup name="TRadioGroup" lang="ts">
import Vote from "../TVote/vote.vue";
import { nextTick, onMounted, ref, toValue, watch } from "vue";
import { useFormItemExam } from "../hooks/useExamHook";
import { formEmits, formItemProps, useFormItem } from "../hooks/useFormItemHook";
import { BasicComponent } from "../../GenerateForm/types/form";
import { useVoteHook } from "../TVote/useVoteHook";
import { useOptionQuota } from "../hooks/useOptionQuotaHook";
import { removeHtmlTag } from "@/views/formgen/utils";
import { formOptionLogicHook } from "@/views/formgen/components/GenerateForm/hooks/useFormOptionLogic";

const props = defineProps({
  ...formItemProps,
  models: {
    type: Object,
    default: () => {}
  }
});

// 其他
const inputValue = ref("");

const emits = defineEmits([...formEmits, "next"]);

const examHook = useFormItemExam(<BasicComponent>props.item);
const { changeValue, getOptions, autoNextPage, disabledProp, updateValue } = useFormItem(props, emits, false);
const voteHook = useVoteHook(props);
const { handleVote, voteList, totalVote } = voteHook;
const optionQuotaHook = useOptionQuota(props);

const { isHideQuota, getSurplusQuota, showQuota } = optionQuotaHook;
const { isShowOption, initWatchCheckRule } = formOptionLogicHook;

watch(
  () => inputValue.value,
  (val: any) => {
    props.models[`${props.item?.vModel}label`] = val;
  },
  {
    deep: true
  }
);

// 自动选中逻辑
initWatchCheckRule(props.item?.vModel as string, (val: any[]) => {
  if (val.length) {
    const options = getOptions().filter((op: any) => val.includes(op.value));
    // 如果已经被选中则不执行 在执行会取消
    if (options && !val.includes(changeValue.value)) {
      handleClick(options[0]);
    }
  }
});

onMounted(() => {});

const getOptionClass = (option: any) => {
  let classList = [
    props.item?.config?.inline ? "inline-block" : "block",
    isChecked(option.value) ? "checked" : "",
    props.item?.disabled ? "disabled" : ""
  ];
  if (!changeValue.value) {
    return classList;
  }
  classList.push(...examHook.getExamClass(changeValue.value, option.value));
  return classList;
};

const isChecked = (val: any) => {
  return val === changeValue.value;
};

// 记录是否手动点击过 手动点过watch就不执行了
const isClick = ref(false);

const handleClick = (option: any) => {
  isClick.value = true;
  if (disabledProp.value) {
    return;
  }
  if (option?.quotaSetting && getSurplusQuota(option) <= 0) {
    return;
  }
  // 点击两次选项取消
  if (option.value === changeValue.value) {
    changeValue.value = null;
  } else {
    changeValue.value = option.value;
  }
  updateValue(changeValue.value);
  handleVote(changeValue.value);
  // 如果不是输入框 就把值赋值给label  option.value === changeValue.value 比较的目的是为了可以取消值
  if (option.type !== "input") {
    props.models[`${props.item?.vModel}label`] = option.value === changeValue.value ? removeHtmlTag(option.label) : null;
  }
  // 分值
  if (option?.score !== undefined) {
    props.models[`${props.item?.vModel}score`] = option.value === changeValue.value ? option.score : 0;
  }
  // 自动下一页
  nextTick(() => {
    if (toValue(changeValue)) {
      autoNextPage(emits);
    }
  });
};

// 默认值处理 需要处理label和分数 处理默认值 逻辑显隐导致label被清 然后显示时被初始为默认值
watch(
  () => props.value,
  val => {
    if (val && !isClick.value) {
      const option = getOptions().find((op: any) => op.value == val);
      if (option && props.models && option.type !== "input") {
        props.models[`${props.item?.vModel}label`] = toValue(removeHtmlTag(option?.label));
        if (option?.score !== undefined) {
          props.models[`${props.item?.vModel}score`] = option?.score || 0;
        }
      }
    }
  },
  {
    immediate: true
  }
);
// 一页一题
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/exam";

.el-radio {
  height: auto;
  padding: 5px 10px;
  line-height: 28px !important;
}

:deep(.el-radio) {
  display: flex;

  .el-radio__input {
    line-height: 32px !important;
  }

  .el-radio__label {
    line-height: 28px !important;
  }
}

.block {
  margin-bottom: 10px;
  width: 100%;
  flex-direction: column;

  .el-radio {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;

  .el-radio {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block.show-vote {
  min-width: 156px;
}

.show-vote {
  border-radius: 8px;
  border: var(--el-border);

  .vote-wrap {
    padding: 5px 10px;
  }

  .vote-wrap:empty {
    padding: 0;
  }

  .other-input {
    margin-top: 0;
  }
}

.checked {
  border-color: var(--form-theme-color, #4c4edb);
}

.checked.disabled {
  border-color: #dcdfe6;
}

@media screen and (max-width: 414px) {
  .inline-block.show-vote:nth-child(even) {
    margin-right: 0;
  }
}

:deep(.el-radio__label) {
  width: 90% !important;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: middle;
}
</style>
